<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻添加</title>
    <link href="/libs/layui/css/layui.css" rel="stylesheet">
    <script src="/libs/layui/layui.js"></script>
    <script src="/libs/js/jquery.js"></script>
    <script src="/libs/js/axios.js"></script>
</head>

<body>
    <!-- 面包屑导航 -->
    <span class="layui-breadcrumb" lay-separator="/">
        <a href="/">首页</a>
        <a href="javascript:;">新闻管理</a>
        <a href="/news">新闻管理</a>
        <a><cite>新闻添加</cite></a>
    </span>
    <div class="layui-card">

        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">新闻标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" placeholder="请输入新闻标题"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新闻图片</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <!-- 显示上传完毕的图片 -->
                        <img class="preview_img" src="" alt="" style="width: 100px;display: none">

                        <!-- 隐藏域保存上传成功的图片地址 -->
                        <input lay-verify="img_url" class="save_img" type="hidden" name="img_url">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">新闻分类</label>
                    <div class="layui-input-block">
                        <select name="cateId" lay-verify="required">
                            {{each cates v}}
                            <option value="{{v.id}}">{{v.cate_name}}</option>
                            {{/each}}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新闻内容</label>
                    <!-- 层级设置低，避免挡住下拉菜单选项 -->
                    <div class="layui-input-block" style="z-index: 0">
                        <div id="div1">

                        </div>
                        <!-- 把在线文本编辑器中输入的内容同步到文本域中进行表单提交 -->
                        <textarea name="content" lay-verify="content" id="text1"
                            style="display:none"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新闻作者</label>
                    <div class="layui-input-block">
                        <input type="text" name="author" lay-verify="author" placeholder="请输入作者"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 使用在线文本编辑器 -->
    <script src="/libs/js/wangEditor.js"></script>
    <script type="text/javascript">
        const E = window.wangEditor
        const editor = new E('#div1')
        const $text1 = $('#text1')
        editor.config.onchange = function (html) {
            // 第二步，监控变化，同步更新到 textarea
            $text1.val(html)
        }
        // 设置本地上传的图片转换为base64格式的字符串进行处理
        editor.config.uploadImgShowBase64 = true
        editor.create()
    </script>
    <script src="/js/news/news_add.js"></script>
</body>

</html>